<template>
  <view class="bg">
    <view class="task_bg">
      <view class="top">
        <view class="top_header">
          <image src="../../../../static/images/DCXT/renwu.png" mode="" />
          <view class="top_header_v">
            <view>{{ name }}</view>
            <view :style="getTypeColor(type)">{{ type }}</view></view
          >
        </view>
        <view class="top_item">
          <view>子事项</view>
          <view>{{ zsx }}</view>
        </view>
      </view>
      <view class="task_one">
        <u-form
          :model="model"
          :rules="rules"
          ref="uForm"
          :errorType="errorType"
        >
          <u-form-item
            label-width="160"
            :label-position="labelPosition"
            label="办理情况"
            prop="blqk"
          >
            <u-input
              :border="border"
              placeholder="请输入办理情况"
              v-model="model.blqk"
              type="text"
            ></u-input>
          </u-form-item>
          <u-form-item
            label-width="160"
            :label-position="labelPosition"
            label="存在问题"
            prop="czwt"
          >
            <u-input
              :border="border"
              placeholder="请输入存在问题"
              v-model="model.czwt"
              type="text"
            ></u-input>
          </u-form-item>
          <u-form-item
            label-width="160"
            :label-position="labelPosition"
            label="下一步计划"
            prop="xybjh"
          >
            <u-input
              :border="border"
              placeholder="请输入下一步计划"
              v-model="model.xybjh"
              type="text"
            ></u-input>
          </u-form-item>
          <u-form-item
            :label-position="labelPosition"
            label="图片"
            prop="photo"
            label-width="160"
          >
            <u-upload
              action="http://120.78.158.120:8002/filesUpload/appUploadFiles"
              ref="uUpload"
              :auto-upload="false"
              width="160"
              height="160"
            ></u-upload>
          </u-form-item>
          <u-form-item
            :label-position="labelPosition"
            label="反馈文件"
            prop="photo"
            label-width="160"
          >
            <view class="files">
              <view v-for="(item, index) in filesArr" :key="index">{{
                item.name
              }}</view>
              <view class="files_btn" @tap="chooseFile()">选择文件 ></view>
            </view>
          </u-form-item>
        </u-form>
        <u-button @click="submit">提交</u-button>
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { getTaskBackNew } from "../../../../request/dcxt";
export default {
  data() {
    return {
      name: "",
      type: "",
      zsx: "",
      taskArr: [
        {
          name: "单位重大事项",
          rwmc: "2021重大项目测试任务清单",
          zsx:
            "推广生态调控、农艺改良、物理防控、生物防治等措施，2020年实现不用化学农药绿色生态茶园1.8万亩。",
          fknr: "测试内容，子任务测试反馈内容20200217，测试通过！",
          zt: "待签收",
          ztType: 1,
          qtdw: "农业局",
          xbdw: "住建局、商务局、统计局",
          rwlc: "第 3 轮",
          rwsx: "2021-01-18",
        },
      ],
      model: {
        blqk: "",
        czwt: "",
        xybjh: "",
      },
      rules: {
        blqk: [
          {
            required: true,
            message: "请输入办理情况",
            trigger: ["change", "blur"],
          },
        ],
        czwt: [
          {
            required: true,
            message: "请输入存在问题",
            trigger: ["change", "blur"],
          },
        ],
        xybjh: [
          {
            required: true,
            message: "请输入下一步计划",
            trigger: ["change", "blur"],
          },
        ],
      },
      border: false,
      labelPosition: "left",
      errorType: ["message"],
      recipientId: "",
      taskUnitId: "",
      filesArr: [],
    };
  },
  onLoad(option) {
    this.name = option.name;
    this.type = option.type;
    this.zsx = option.zsx;
    this.taskArr[0].name = option.name;
    this.taskArr[0].rwmc = option.rwmc;
    this.recipientId = option.recipientId;
    this.taskUnitId = option.taskUnitId;
  },
  computed: {
    borderCurrent() {
      return this.border ? 0 : 1;
    },
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    getTypeColor(type) {
      if (type == "征地拆迁") {
        return "backgroundColor:rgba(250, 173, 51, 0.1);color:rgba(250, 173, 51, 1);";
      }
      if (type == "流程选择") {
        return "backgroundColor:rgba(48, 116, 255, 0.1);color:rgba(48, 116, 255, 1);";
      }
    },
    //   选择文件
    chooseFile() {
      var _this = this;
      uni.chooseFile({
        count: 6, //默认100
        extension: [".zip", ".doc"],
        success: function (res) {
          for (let i = 0; i < res.tempFilePaths.length; i++) {
            _this.filesArr.push({
              tempFilePaths: res.tempFilePaths[i],
              name: res.tempFiles[i].name,
            });
          }
        },
      });
    },
    submit() {
      let filesName = [];
      let filesId = [];
      // 上传图片
      this.$refs.uUpload.upload();
      // 上传文件
      for (let i = 0; i < this.filesArr.length; i++) {
        uni.uploadFile({
          url: "http://120.78.158.120:8002/filesUpload/appUploadFiles", //仅为示例，非真实的接口地址
          filePath: this.filesArr[i].tempFilePaths,
          name: "file",
          formData: {},
          success: (uploadFileRes) => {
            filesName.push(JSON.parse(uploadFileRes.data).data[0].oldName);
            filesId.push(JSON.parse(uploadFileRes.data).data[0].sysid);
          },
        });
      }
      // 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
      var fileImg = this.$refs.uUpload.lists;
      for (let i = 0; i < fileImg.length; i++) {
        setTimeout(() => {
          filesName.push(fileImg[i].response.data[0].oldName);
          filesId.push(fileImg[i].response.data[0].sysid);
        }, 1000);
      }
      setTimeout(() => {
        this.$refs.uForm.validate((valid) => {
          if (valid) {
            var params = {
              content: this.model.blqk,
              problem: this.model.czwt,
              plan: this.model.xybjh,
              recipientId: this.recipientId,
              taskUnitId: this.taskUnitId,
              file: filesName,
              fileName: filesId,
              loginerId: uni.getStorageSync("loginId"),
            };
            getTaskBackNew(params).then((res) => {
              if (res.data.code == 200) {
                this.$refs.uToast.show({
                  title: "提交成功！",
                  type: "success",
                });
                setTimeout(() => {
                  uni.navigateBack({
                    delta: 1,
                  });
                }, 1000);
              } else {
                this.$refs.uToast.show({
                  title: "提交失败！",
                  type: "error",
                });
              }
            });
          } else {
            console.log("验证失败");
          }
        });
      }, 2000);
    },
    errorChange(index) {
      if (index == 0) this.errorType = ["message"];
      if (index == 1) this.errorType = ["toast"];
      if (index == 2) this.errorType = ["border-bottom"];
      if (index == 3) this.errorType = ["border"];
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  width: 710rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(48, 116, 255, 0.1);
  border-radius: 8rpx;
  margin: 0 auto;
  margin-bottom: 40rpx;
  padding: 40rpx 24rpx;
  .top_header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1rpx solid rgba(231, 233, 240, 1);
    padding-bottom: 20rpx;
    image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 20rpx;
    }
    .top_header_v {
      flex: 1;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      view:nth-child(1) {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #272b32;
      }
      view:nth-child(2) {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        border-radius: 4rpx;
        padding: 8rpx 16rpx;
      }
    }
  }
  .top_item {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    padding: 16rpx 0;

    view:nth-child(1) {
      width: 150rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #8e9cb3;
    }
    view:nth-child(2) {
      flex: 1;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #272b32;
      margin-left: 20rpx;
    }
  }
}
.files {
  display: flex;
  flex-flow: row wrap;
  view {
    width: 300rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .files_btn {
    width: 300rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    background-color: #19be6b;
    color: white;
    border-radius: 8rpx;
  }
}
.top_search {
  width: 100vw;
  height: 120rpx;
  background-color: #3988ff;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;

  .search_screening {
    margin-left: 2%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;
    }

    .font {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.7);
    }
  }
}

.popupModel {
  position: relative;
  padding-top: 48rpx;

  .task_left_top {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 150rpx;
    height: 48rpx;
    background: rgba(48, 116, 255, 0.2);
    border-radius: 24rpx;
    display: flex;
    align-items: center;

    .name {
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #3074ff;
      padding: 0 20rpx;
    }

    .task_round {
      width: 48rpx;
      height: 48rpx;
      background: #3074ff;
      z-index: 999;
      box-shadow: 2px 3px 12px 0px rgba(48, 116, 255, 0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }

  .popupContent {
    padding: 24rpx;

    .Content {
      width: 100%;
      display: flex;
      align-items: center;

      .name {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #272b32;
      }
    }
  }
}

.task_bg {
  // margin-top: 120rpx;

  .task_one {
    background-color: rgba(255, 255, 255, 1);
    padding: 24rpx;
    position: relative;
    margin-bottom: 40rpx;
    box-shadow: 0px 0px 24rpx 0px rgba(48, 116, 255, 0.1);
    border-radius: 24rpx 8rpx 8rpx 8rpx;

    .line {
      width: 1rpx;
      height: calc(100% - 48rpx);
      // background-color: pink;
      position: absolute;
      left: 44rpx;
      top: 24rpx;
      border-left: 1rpx dashed rgba(48, 116, 255, 0.1);
      // z-index: 5;
    }
  }

  .record_flex {
    display: flex;
    align-items: flex-start;
    margin-bottom: 40rpx;

    .record_flex_1 {
      flex: 1;
      padding-left: 25rpx;

      .record_top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10rpx;

        .flex_1 {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;

          image {
            width: 16rpx;
            height: 14rpx;
          }
        }

        .flex_2 {
          flex: 1.5;
          display: flex;
          align-items: center;
          justify-content: space-between;

          image {
            width: 16rpx;
            height: 14rpx;
          }
        }

        .flex_right {
          display: flex;
          justify-content: flex-end;
          flex: 1;
        }

        .center_font {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #3074ff;
        }

        .name_font {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #272b32;
        }
      }

      .time {
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8e9cb3;
      }
    }

    .record_flex_40 {
      width: 40rpx;

      .round {
        width: 40rpx;
        height: 40rpx;
        background: linear-gradient(-30deg, #3074ff 0%, #41baff 100%);
        box-shadow: 2rpx 3rpx 12rpx 0rpx rgba(48, 116, 255, 0.4);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999999;

        image {
          width: 16rpx;
          height: 16rpx;
        }
      }
    }
  }

  .task_left_top {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 200rpx;
    height: 48rpx;
    background: rgba(48, 116, 255, 0.2);
    border-radius: 24rpx;
    display: flex;
    align-items: center;

    .name {
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #3074ff;
      padding: 0 20rpx;
    }

    .task_round {
      width: 48rpx;
      height: 48rpx;
      background: #3074ff;
      z-index: 5;
      box-shadow: 2px 3px 12px 0px rgba(48, 116, 255, 0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }

  .task_content {
    width: 100%;
    margin-top: 40rpx;

    .task_btnArr {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 40rpx;
    }

    .task_btn {
      background: #3074ff;
      border-radius: 4rpx;
      padding: 8rpx 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 20rpx;

      image {
        width: 24rpx;
        height: 24rpx;
        margin-right: 10rpx;
      }

      .more {
        width: 24rpx;
        height: 6rpx;
        margin-right: 10rpx;
      }

      .font {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
      }
    }

    .btn_color1 {
      background-color: rgba(231, 233, 240, 1);
    }

    .btn_color2 {
      background-color: rgba(248, 95, 120, 1);
    }

    .task_name {
      display: flex;
      padding-bottom: 40rpx;
    }

    .task_child {
      padding: 20rpx 0;
      border-top: 1rpx solid rgba(231, 233, 240, 1);
      border-bottom: 1rpx solid rgba(231, 233, 240, 1);
    }

    .task_test {
      display: flex;
      margin: 20rpx 0;
    }

    .task_left {
      flex: 2;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #8e9cb3;
    }

    .nameFont {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #272b32;
    }

    .task_right {
      flex: 7;
      display: flex;
      align-items: center;

      .childFont {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #272b32;
      }

      .zt_type1 {
        margin-left: 10rpx;
        background: #f85f78;
        border-radius: 4rpx;
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
        padding: 0 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .zt_type2 {
        margin-left: 10rpx;
        background: rgba(250, 173, 51, 1);
        border-radius: 4rpx;
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
        padding: 0 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
